<template>
    <div>
        <Card>
            <p slot="title">管理员列表</p>
            <div slot="extra">
                <Button type="primary" @click="addManage">创建管理员</Button>
            </div>
            <list-frm :loading="loading" :listData="listData" :pageNum="pageNum" @edit-call="onCancel"></list-frm>
        </Card>
        <page :total="total" :pageNum="pageNum" :pageSize="pageSize" @page-on-size="onPageSize" @page-on-change="pageChange"></page>
        <Modal
            v-model="isAdd"
            title="新增管理员"
            :footer-hide="true"
            :width="60"
            @on-cancel="onCancel"
            :styles="{top: '0'}">
            <add-from :accessList="accessList" ref="addFrom" @on-success-valid="addSuccess"></add-from>
        </Modal>
    </div>
</template>

<script>

import listFrm from './list/index'
import Page from '@/view/components/page/page.vue'
import AddFrom from './add/index'
import { getManageUser, getAccessList, addManageUser } from '@/api/manage'

export default {
  name: 'manageList',
  components: {
    listFrm,
    Page,
    AddFrom
  },
  data () {
    return {
      pageNum: 1,
      total: 0,
      pageSize: 10,
      loading: true,
      listData: [],
      accessList: [],
      isAdd: false
    }
  },
  mounted: function () {
    this.getUserList()
    this.getAccessList()
  },
  methods: {
    pageChange (pageNum) {
      this.pageNum = pageNum
      this.getUserList()
    },
    onPageSize (pageSize) {
      this.pageSize = pageSize
      this.getUserList()
    },
    getUserList () {
      this.loading = true
      const pageNum = this.pageNum
      const pageSize = this.pageSize
      getManageUser({ pageNum, pageSize }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.total = data.data.total
          this.listData = data.data.list
          this.loading = false
        } else {
          this.$Message.error(data.error)
        }
      }).catch((err) => {
        console.log(err)
        this.$Message.error('数据获取失败')
      })
    },
    getAccessList () {
      getAccessList().then(res => {
        if (res.data.code === 200) {
          this.accessList = res.data.data
        } else {
          this.$Notice.warning({
            title: res.data.error
          })
          this.accessList = []
        }
      }).catch(() => {
        this.$Notice.warning({
          title: '获取管理员角色失败'
        })
        this.accessList = []
      })
    },
    addManage () {
      this.isAdd = true
    },
    addSuccess ({ manage_name, manage_phone, manage_pass, avator, access, manage_state, team_name }) {
      addManageUser({ manage_name, manage_phone, manage_pass, avator, access, manage_state, team_name }).then(res => {
        if (res.data.code === 200) {
          this.getAccessList()
          this.$refs.addFrom.success()// 新增成功
          this.$Message.success(res.data.message)
          this.isAdd = false
          this.getUserList()
        } else {
          this.$refs.addFrom.fail()
          this.$Message.error(res.data.error)
        }
      }).catch(err => {
        console.log(err)
        this.$refs.addFrom.fail()
        this.$Message.error('创建失败')
      })
    },
    onCancel () {
      this.getUserList()
    }
  }
}
</script>

<style lang="" scoped>

</style>
